<template>
	<div>
		<div class="header">
		   <div class="header-left">
		   	<div class="iconfont back">&#xe625;</div>
		   	
		   </div>
		   <div  class="header-input">
		   	<span class="iconfont search">&#xe606;</span>
		   	<input type="text" placeholder="商品"/>
		   </div>
		   <div class="header-right">上海<span class="iconfont">&#xe600;</span></div>
		</div>
	</div>
</template>

<script>	
	export default {
		name: 'Homeheader'
	}
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/color.styl'
.header{
	height:.86rem;
	background-color:$bgHead;
	display: flex;
	color:#FFFFFF;
	.header-left{
		width:0.64rem;		
		float:left;		
		.back{
			text-align: center;
		    font-size:0.5rem;
		    line-height: 0.86rem;
		    padding-left:0.2rem;
		}
	}
	.header-input{
		flex:1;
		height:.64rem;
		line-height:0.64rem;
		margin-top:.12rem;
		margin-left:.2rem;
		border-radius: .1rem;
		background-color:#FFFFFF;
		.search{
			color:#ccc;
			display: inline-block;
			width:0.5rem;
			font-size:0.4rem;
			text-align: center;
		}
		input{
			width:calc(100% - 40px);
		}
	}
	.header-right{
		width:1.24rem;
		line-height:0.86rem;
		float:right;
		text-align: center;
	}
}
</style>